<template>
  <div class="ele-body">
    <p style="margin-top: -6px">
      <label style="margin-right: 10px">Name</label>
      <vxe-input style="margin-right: 10px" v-model="testData.input1" placeholder="请输入姓名" size="mini"></vxe-input>

      <label style="margin-right: 10px">Age</label>
      <vxe-select style="margin-right: 10px" v-model="testData.value1" placeholder="超小尺寸" size="mini">
      <vxe-option  v-for="num in 10" :key="num" :value="num" :label="`${num}岁`"></vxe-option>
      </vxe-select>

      <label style="margin-right: 10px">Sex</label>
      <vxe-radio style="margin-right: 5px" name="n1" v-model="testData.value2" label="4" content="男" size="mini"></vxe-radio>
      <vxe-radio style="margin-right: 10px" name="n1" v-model="testData.value2" label="4" content="女" size="mini"></vxe-radio>

      <vxe-button style="margin-right: 5px" status="primary" size="mini" content="查询"></vxe-button>
      <vxe-button style="margin-right: 5px"  size="mini" content="重置"></vxe-button>
    </p>

    <vxe-table
      size="mini"
      :data="tableData">
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column type="radio" width="60"></vxe-column>
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="age" title="Age" sortable></vxe-column>
      <vxe-column field="sex" title="Sex" :filters="[{value:'0',label:'女'},{value:'1',label:'男'}]"></vxe-column>
      <vxe-column field="sex2" title="Sex2" sortable :filters="[{value:'0',label:'女'},{value:'1',label:'男'}]" :filter-multiple="false"></vxe-column>
      <vxe-column field="address" title="Address" show-overflow></vxe-column>
      <vxe-column title="操作">
        <vxe-button type="text" status="primary" content="配置"></vxe-button>
        <vxe-button type="text" status="warning" content="警告" ></vxe-button>
      </vxe-column>
    </vxe-table>
    <p>
      <vxe-pager
        background
        v-model:current-page="page5.currentPage"
        v-model:page-size="page5.pageSize"
        :total="page5.totalResult"
        :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
      </vxe-pager>
    </p>
  </div>
</template>

<script>

  import { defineComponent, ref, reactive } from 'vue'


  // export default {
  //   name: 'testPage',
  //   data() {
  //     return {};
  //   },
  //   mounted() {},
  //   methods: {}
  // }



  export default defineComponent({

      name: 'testPage1',
      data() {
        return {};
      },
      mounted() {},
      methods: {},

      setup () {
        const tableData = ref([
          { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 从入门到放弃' },
          { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
          { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
          { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 23, address: 'vxe-table 从入门到放弃' },
          { id: 10005, name: 'Test5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },
          { id: 10006, name: 'Test6', role: 'Designer', sex: 'Women', age: 21, address: 'vxe-table 从入门到放弃' },
          { id: 10007, name: 'Test7', role: 'Test', sex: 'Man', age: 29, address: 'vxe-table 从入门到放弃' },
          { id: 10008, name: 'Test8', role: 'Develop', sex: 'Man', age: 35, address: 'vxe-table 从入门到放弃' },
          { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 从入门到放弃' },
          { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
          { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
          { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 23, address: 'vxe-table 从入门到放弃' },
          { id: 10005, name: 'Test5', role: 'Develop', sex: 'Women', age: 30, address: 'Shanghai' },

        ]);

      const testData = reactive({
        input1:'',
        value1:'',
        value2:'',
      });
        const page5 = reactive({
          currentPage: 1,
          pageSize: 10,
          totalResult: 300
        });

      return {
        tableData,
        testData,
        page5,
      }
    }


  })

</script>
